<template>
<div class="transport-content-box avia-content">
        <!-- banner图 -->
        <div class="h-banner">
        </div>
        <!-- 热门路线 -->
        <div class="h-hot-way container-1200">
            <div class="h-hot-title">
                  <span></span>
                  <span>热门航空运输线路</span>
                  <img src="@/static/img/index/hot.png">
            </div>
            <div class="h-hot-city">
              <ul>
                <li v-for="(item,index) in hotLineList" :key="index" @click="changeCity(item)">
                    <!-- <nuxt-link :to="'/transport/list?fromCity='+item.fromCity+'&toCity='+item.toCity"> -->
                      <span>{{item.fromCity}}</span>
                      <span></span>
                      <span>{{item.toCity}}</span>
                    <!-- </nuxt-link> -->
                </li>
              </ul>
            </div>
        </div>
       <!-- 出发地 -->
        <div class="h-start-place">
                <div class="container-1200 start-box">
                        <a-form :form="form">
                            <a-row :gutter='24' class='city-form'>
                                  <a-col :span='6' class='h-place-190'>
                                        <a-form-item label="出发地:"  :label-col="{ span: 6}" :wrapper-col="{ span:18 }">
                                              <a-input  placeholder="请选择出发地"  v-model="fromCity" readOnly @click="magSvgShowMap('departureCar')"/>
                                        </a-form-item>
                                  </a-col>
                                  <a-col :span='6' class='h-place-190'>
                                        <a-form-item label="到达地:"  :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                                               <a-input  placeholder="请选择到达地" v-model="toCity" readOnly @click="magSvgShowMap('destinationCar')"/>
                                        </a-form-item>
                                  </a-col>
                                  
                                  <a-col :span='6' class='h-place-140'>
                                        <a-form-item label="出发日期:"  :label-col="{ span: 10}" :wrapper-col="{ span:14 }">
                                            <a-date-picker  format="YYYY-MM-DD" v-model="fromDate"  placeholder='请选择出发日期' />
                                        </a-form-item>
                                  </a-col>
                                  <a-col :span='4'>
                                          <a-button type="primary" :span='2' style='margin-right:20px;' class='ant-btn-primary' @click="lineGetSelectLines">搜索</a-button>
                                          <a-button :span='2' @click="reset">重置</a-button>
                                  </a-col>
                            </a-row>
                            <a-row>
                                  <a-col :span='6' class='h-place-190'>
                                      <a-form-item label="航空公司:"  :label-col="{ span: 6}" :wrapper-col="{ span:18 }">
                                        <a-select placeholder="全部"  v-model="airCompany"  @change="transTypeChange">
                                              <a-select-option value="">全部</a-select-option>
                                              <a-select-option v-for="(item,index) in highwayList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
                                        </a-select>
                                      </a-form-item>
                                  </a-col>
                                  <a-col :span='6' class='h-place-190'>
                                        <a-form-item label="机型:"  :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                                          <a-select placeholder="全部" v-model="airModel"  @change="airTypeChange">
                                              <a-select-option value="">全部</a-select-option>
                                              <a-select-option v-for="(item,index) in airTypeList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
                                          </a-select>
                                        </a-form-item>
                                  </a-col>
                            </a-row>
                        </a-form>
                </div>
        </div>
         <!-- 海运信息 -->
        <div  class='h-information road-detail-content container-1200'>
              <div class="h-info-title">
                 <span></span>
                 <span>航空信息</span>
              </div>
        <div class="all-ways">
          <div class="air-list-title">
              <ul>
                  <li>航空公司</li>
                  <li>日期</li>
                  <li>出发机场-到达机场</li>
                  <li>运价</li>
                  <li>查看</li>
              </ul>
          </div>
          <a-list itemLayout="vertical" size="large" :dataSource="listData" :pagination="pagination">
              <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                  <div class="air-content-img">
                        <img :src="item.companyPic">
                  </div>  
                  <div class="air-content-date">
                      <span>{{dateTypeTime(item.fromTime,'MM:DD') }}</span>
                      <span>{{dateTypeTime(item.fromTime,'周')}}</span>
                  </div>
                  <div class="air-right-detail">
                      <div class="air-surplus">
                            <span>剩余仓位</span>
                            <a-progress :format="percent => `${percent}%`" strokeLinecap="square" :percent="chaNum(item.airSpaceSurplus,item.airSpaceTotal)" />
                            <span>可用</span>
                      </div>
                       <div class="air-company-road">
                        <!-- 线路中转 -->
                        <div class="air-road-change">
                            <!-- 出发机场-->
                            <div class="air-start-place">
                                <span>{{dateTypeTime(item.fromTime,'HH:MM') }}</span>
                                <span>{{item.fromAirPortName}}</span>
                            </div>
                            <div class="air-line">
                                <div class="air-transfer" v-if="item.airTransfer == 0">
                                  直达
                                </div>
                                <div class="air-transfer" v-if="item.airTransfer == 1">
                                  中转(杭州)
                                </div>
                                <div class="air-line-pic">
                                   <img src="./../.././static/img/index/roadLine.png" alt="" />
                                </div>
                                <div class="air-arrive-time">
                                  抵运时间：{{dateTimeChang(item.fromTime,item.toTime)}}
                                </div>
                            </div>
                            <!-- 到达机场 -->
                            <div class="air-end-place">
                                <span>{{dateTypeTime(item.toTime,'HH:MM') }}</span>
                                <span>{{item.toAirPortName}}</span>
                            </div>
                        </div>
                        </div>
                  </div>
                  <div class="air-price">
                        <div>￥<i>{{item.transPriceDisplay}}</i>元</div>
                        <span>({{item.airModelValue}})</span>
                  </div>
                  <div class="road-box-conent">
                    <a-button v-if="loggedIn&&loggedUser.attestationStatus==111" class='ant-btn-primary road-sell' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                    <a-button v-if="loggedIn&&loggedUser.attestationStatus!=111" class='ant-btn-primary road-sell' type="primary" @click="TipsShowModal(item.userId)">立即沟通</a-button>
                    <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary road-sell' type="primary">立即沟通</a-button></router-link>
                    <nuxt-link :to="'/transport/'+item.lineId">
                        <a-button class='road-detail'>查看详情</a-button>
                    </nuxt-link>
                </div>
              </a-list-item>
          </a-list>
        </div> 
        </div>
        <Elastic :userId="userId" ref='elastic'></Elastic>
            <!-- 提示认证弹框 -->
        <Elastics  ref='elastics'></Elastics>
        <!--地图Svg显示位置-->
        <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
</div>
</template>

<script>
import Elastic from '@/components/dialog/Elastic'
import Elastics from '@/components/dialog/Elastics'
import AuthMixin from '~/mixins/auth'
import moment from 'moment'
import 'moment/locale/zh-cn';
moment.locale('zh-cn')
export default {
  mixins: [ AuthMixin ],
  components: {
    Elastic,
    Elastics,
  },
  data() {
    return {
       userId: '',
      // 热门
      hotLineList: [], 
       // 起运地地址
      departureCar: '',
      destinationCar: '',
      // 数据列表
      listData: [],
      airTypeList: [],
      airModel: '',
      airCompany: '',
      fromCity: '',
      toCity: '',
      // 是否中转
      airTransfer: '',
      companyName: '',
      transType: '',
      highwayList: [],
      // 表格分页
      pagination: {
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        current: 1,
        pageSize: 7,
        // showSizeChanger: true,
        total: 0,
        showTotal: (total, range) => `共 ${total} 条记录`,
        onChange: (page) => {
          this.pagination.current = page
          this.lineGetSelectLines()
        }
      },
      fromDate: null
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  created: function() {
    this.infoCommonDict(23);
    this.infoCommonDict(27);//机型
    this.lineGetLinesHot();
    this.lineGetSelectLines();
  },
  methods: {
      // 时分 
      dateTypeTime(time,type) {
        if (time){
          time = time.replace(/-/g,'/');
          if(type == 'HH-MM'){
            let h = new Date(time).getHours()
            let f = new Date(time).getMinutes()
            return (h<9?'0':'')+h+':'+ (f<9?'0':'')+f
          }
          if(type == 'MM:DD'){
            let m = new Date(time).getMonth()+1
            let d = new Date(time).getDate()
            return (m<9?'0':'')+m+'-'+ (d<9?'0':'')+d
          }
          if(type == '周'){
            let day = new Date(time).getDay(),text = "";
            switch (day) {
              case 0: text = "星期日"; break;
              case 1: text = "星期一"; break;
              case 2: text = "星期二"; break;
              case 3: text = "星期三"; break;
              case 4: text = "星期四"; break;
              case 5: text = "星期五"; break;
              case 6: text = "星期六"; break;
            }
            return text
          }
        }
        return ''
      },
      // 百分比
      chaNum (min,max) {
        let num = ( min/max)*100;
        if (num>100) num = 100
        return parseInt(num) || 0
      },
      // 两时间差 时分
      dateTimeChang (min,max){
        if (min && max){
          min = min.replace(/-/g,'/');
          max = max.replace(/-/g,'/');
          let time = new Date(max).getTime()-new Date(min).getTime()
          let h = parseInt(time/3600000)
          let f = parseInt((time%3600000)/1000/60)
          return (h<9&h>0?'0':'')+h+'小时'+(f<9&f>0?'0':'')+f+'分'
        }
        return ''
      },
      // 弹框
      elasticShowModal(id){
        this.userId = id
        this.$refs.elastic.showModal(id);
      },
      TipsShowModal(id){
          this.$refs.elastics.warning(id);
      },
      // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageNum: 1
          })
          if (res.status) {
            switch(type){
              case 23: this.highwayList = res.data.rows; break;
              case 27: this.airTypeList = res.data.rows; break;
            }
          } 
      },
      // 重置
      reset (){
        this.companyName = '';
        this.departureCar = '';
        this.destinationCar = '';
        this.airCompany = '';
        this.airModel = '';
        this.fromDate = null;
        this.fromCity = '';
        this.toCity = '';
        this.lineGetSelectLines();
      },
      // 中转切换
      zhongzhuanChange (key){
        this.airTransfer = key;
      },
      // 公司切换
      companyChange (key){
        this.companyName = key;
      },
      // 获取热门线路
      async lineGetLinesHot () {
        const res = await this.$store.dispatch('info/lineGetLinesHot',{
          pageSize: 10,
          pageNum: 1,
          hotLine: 1
        })
        if (res.status) {
          this.hotLineList = res.data;
        } 
      },
      // 获取线路列表
      async lineGetSelectLines () {
          let obj = {
            lineType: 3,
            // fromCity: this.departureCar,
            companyName: this.companyName,
            // toCity: this.destinationCar,
            beginPlace: this.fromCity,
            endPlace: this.toCity,
            airModel: this.airModel,
            airCompany: this.airCompany,
            pageSize: this.pagination.pageSize,
            pageIndex: this.pagination.current,
          }
          if (this.fromDate) obj.fromDate = moment(this.fromDate).format('YYYY-MM-DD')
          const res = await this.$store.dispatch('info/lineGetSelectLines',obj)
          if (res.status) {
            let d = res.data.rows;
            this.listData = d;
            this.pagination.total = res.data.total;
          } 
      },
      // 热门线路搜索
      changeCity(item){
        this.fromCity = item.beginPlace;
        this.toCity = item.endPlace;
      },
      // 运输类型切换
      transTypeChange(key){
        this.airCompany = key;
      },
      airTypeChange(key){
          this.airModel = key;
      },
      // 省市地图回调
      mapSvgCall (d) {
        // this[d.name] = d.city;
        this[d.name] = d.provCityArea;
          if(d.name=='departureCar'){
            this.fromCity = d.provCityArea;
          }
          if(d.name=='destinationCar'){
            this.toCity = d.provCityArea;
        }
      },
      // 起运地
      magSvgShowMap (name) {
        this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
      },
      // 调用距离返回
      distanceCall (num) {
      }
  }
}
</script>
<style lang="scss">
@import "./../../assets/css/info/roadDetail.scss";
@import "@/assets/css/transport/road.scss";
.avia-content{
    //轮播
    .h-banner{
      background:url('~static/img/transport/transport3.jpg') center top / cover no-repeat;
    }
    .ant-calendar-today{
        .ant-calendar-date{
           color: red !important;
        }
    }
    //日历
      .calendar-box{
        position: absolute;
        z-index: 999;
        .ant-select{
           width: 80px !important;
        }
        .ant-select-selection{
           width: 80px !important;
        }
        .ant-radio-button-wrapper{
          height: 40px;
          line-height:  40px;
        }
        .ant-fullcalendar-calendar-body{
           padding: 8px 0px;
        }
      }
      th:nth-child(5){
        .ant-table-column-sorter{
            right:150px !important;
            margin-top:-4px !important;
        }
        .anticon-caret-down{
            display:none !important;
        }
      }
     th:nth-child(8){
        .ant-table-column-sorter{
            right:18px !important;
            margin-top:-6px;
        }
        .anticon-caret-up{
            display:none !important;
        }
    }
   //出发地
   .h-start-place{
     width:100%;
     background:#F9F9F9;
     margin-top:30px;
     .start-box{
       padding-top:20px;
      .ant-form-item label{
        font-size:16px;
        color:#333333;
      }
      .h-place-190{
         .ant-form-item-control{
           width:190px;
           height:40px;
         }
         input{
            width:190px;
            height:40px;
         }
      }
      .h-place-140{
       .ant-form-item-control{
           width:140px;
           height:40px;
         }
         input{
            width:140px;
            height:40px;
         }
      }
     }
   }
   .ant-table-thead{
       tr:nth-child(2){
         padding:4px 10px !important;
         th{
          padding:4px 10px !important;
         }
         td{
          padding:4px 10px !important;
         }
       }
       .ant-table-column-sorter{
          color:#999999 !important;
       }
     }
     tr,td,th{
        text-align:center;
        font-weight:400 !important;
        padding:4px 10px 0px 10px;
        .ant-table-column-sorter-up.on,.ant-table-column-sorter-down.on{
           color:#15837A !important;
        }
     }
    .ant-select-enabled{
        height: 40px;
        color: #999999;
        .ant-select-selection{
          height: 40px;
        }
        .ant-select-selection__rendered{
           line-height: 40px !important;
           height: 40px;
        }
    }


     //公共样式
  .all-ways {
    .air-list-title{
        width: 1200px;
        height: 60px;
        background: #F7F7F7;
        ul{
            li{
              float: left;
              font-size: 16px;
              color: #333333;
              text-align: center;
              line-height: 60px;
            }
            li:nth-child(1){
                width: 200px;
            }
            li:nth-child(2){
                width: 140px;
            }
            li:nth-child(3){
                width: 585px;
            }
            li:nth-child(4){
                width: 120px;
            }
            li:nth-child(5){
                width: 150px;
            }
        }
      }
        //航空图片
        .air-content-img{
            width: 190px;
            height: 140px;
            float: left;
            img{
                width: 100%;
                height: 100%;
            }
        }
        //日期
        .air-content-date{
            width: 140px;
            float: left;
            text-align: center;
            margin-top: 40px;
            span{
                display: block;
                font-size: 14px;
                color: #333333;
            }
        }
        .air-price{
            width: 168px;
            text-align: center;
            margin-top: 40px;
            font-size: 14px;
            float: left;
            margin-left: 16px;
            i{
                font-size: 24px;
                color: #FEB72D;
            }
            span{
               color: #000000;
            }
        }
        .road-box-conent{
         // margin-left: 28px;
         margin-top: 20px;
          button{
              display: block;
          }
          .road-detail{
              margin-top: 20px;
          }
        }
        .air-right-detail{
            float: left;
            margin-top: 18px;
            //剩余仓位
            .air-surplus{
              margin-top: 15px;
              margin-left: 32px;
              .ant-progress{
                 width: 340px;
              }
              .ant-progress-outer{
                 width: 308px;
              }
              .ant-progress-text{
                padding-left: 46px;
              }
              span{
                  font-size: 14px;
                  color: #333333;
                  vertical-align: middle;
              }
              span:nth-child(1){
                  margin-right: 50px;
                  margin-left: 10px;
              }
              span:nth-child(3){
                  margin-left: 25px;
              }
              .ant-progress-inner{
                  background-color: #FE4040;
              }
              .ant-progress-bg{
                  background-color: #FFDFDF;
                  border-radius: 0 10px 10px 0 !important;
                  float: right;
              }
          }
      //航空公司
      .air-company-road{
          margin-top: 25px;
          width: 565px;
          float: left;
          //航空信息
          .air-comany-name{
              width: 56px;
              text-align: center;
              float: left;
              margin: 10px 6px 0 4px;
              span{
                display: block;
                font-size: 14px;
              }
              span:first-child{
                 color: #333333;
              }
              span:last-child{
                  color: #666666;
              }
          }
          //线路中转
          .air-road-change{
            float: left;
            width:  600px;
            text-align: center;
            .air-start-place{
              float: left;
              width: 128px;
             // margin-right: 20px;
              //margin-left: 14px;
              span{
                 display: block;
                 color: #15837A;
              }
              span:first-child{
                  font-size: 20px;
              }
               span:last-child{
                  font-size: 16px;
              }
            }
            .air-line{
              float: left;
              color: #666666;
              font-size: 14px;
              margin-left: 24px;
              .air-line-pic{
                 width: 278px;
                 height: 16px;
                 position: relative;
                 img{
                     width: 100%;
                     height: 100%;
                     position: absolute;
                     left: 0;
                     top: 50%;
                     margin-top: -8px;
                 }
              }
              .air-arrive-time{
                  margin-top: 10px;
              }
            }

          }
          //到达
          .air-end-place{
              float: left;
							width: 140px;
              margin-left: 24px;
              span{
                 display: block;
                 color: #15837A;
              }
              span:first-child{
                  font-size: 20px;
              }
               span:last-child{
                  font-size: 16px;
              }
          }
          //机票价格
          .air-price{
            float: left;
            font-size: 14px;
            color: #000000;
            background: cyan;
            i{
               font-size: 24px;
               color: #FEB72D;
            }
          }
      }
  }
  }

  //航空
  .air-title{
      width:300px;
      margin-left:25px;
      table{
          width: 300px;
      }
      th{
        padding-right:20px;
      }
      td{
          padding-right:20px;
          padding-top:2px;
      }
  }

}
</style>